<template>
  <div class="v-data-footer">
    <v-alert
      v-if="permission"
      border="top"
      color="red lighten-2"
      dark
      class="saveClass"
      type="error"
    >
      您没有跳转权限
    </v-alert>
    <v-alert
      v-show="show"
      :value="error1"
      type="error"
      :outlined="true"
      border="top"
      color="red lighten-2"
      dark
      class="saveClass1"
    >
      你必须选择一个标签
    </v-alert>
    <v-alert
      :value="error"
      type="error"
      :outlined="true"
      border="top"
      color="red lighten-2"
      dark
      class="saveClass"
    >
      你必须选择一级和二级分类
    </v-alert>
    <v-edit-dialog large persistent @save="changePageNumber">
      <span>{{ value }} of {{ length }}</span>
      <template v-slot:input>
        <div class="mt-4 title">Move Page</div>
      </template>
      <template v-slot:input>
        <v-text-field
          v-model="newPage"
          :rules="rules"
          label="Edit"
          single-line
          counter
          autofocus
        />
      </template>
    </v-edit-dialog>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn
          v-show="isAdmin === 'true'"
          v-shortkey.once="['shift', 'arrowleft']"
          :disabled="value === 1"
          text
          fab
          small
          v-on="on"
          @shortkey="debounce(firstPage, 300)"
          @click="debounce(firstPage, 300)"
        >
          <v-icon>mdi-page-first</v-icon>
        </v-btn>
      </template>
      <span>
        <v-icon>mdi-page-first</v-icon>
      </span>
    </v-tooltip>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn
          v-shortkey.once="['arrowleft']"
          :disabled="value === 1"
          text
          fab
          small
          v-on="on"
          @shortkey="debounce(prevPage, 300)"
          @click="debounce(prevPage, 300)"
        >
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </template>
      <span>←</span>
    </v-tooltip>
    <div>{{ this.showPage }}</div>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn
          v-shortkey.once="['arrowright']"
          :disabled="value === length || length === 0"
          text
          fab
          small
          v-on="on"
          @shortkey="debounce(nextPage, 300)"
          @click="debounce(nextPage, 300)"
        >
          <v-icon>mdi-chevron-right</v-icon>
        </v-btn>
      </template>
      <span>→</span>
    </v-tooltip>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn
          v-show="isAdmin === 'true'"
          v-shortkey.once="['shift', 'arrowright']"
          :disabled="value === length || length === 0"
          text
          fab
          small
          v-on="on"
          @shortkey="debounce(lastPage, 300)"
          @click="debounce(lastPage, 300)"
        >
          <v-icon>mdi-page-last</v-icon>
        </v-btn>
      </template>
      <span>
        <v-icon>mdi-page-last</v-icon>
      </span>
    </v-tooltip>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1,
      required: true
    },
    length: {
      type: Number,
      default: 1,
      required: true
    }
  },
  data() {
    return {
      isAdmin: localStorage.getItem('isAdmin'),
      editedPage: null,
      error: false,
      error1: false,
      showPage: '',
      rules: [
        v =>
          (v && parseInt(v, 10) > 0 && parseInt(v, 10) <= this.length) ||
          'Invalid page number!'
      ],
      show: null,
      // 防抖
      timer: null,
      permission: false,
      permission1: false
    }
  },
  directives: {
    debounce: {
      inserted(el, binding) {
        let timer = null
        el.addEventListener('click', () => {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            binding.value()
          }, 300)
        })
      }
    }
  },
  computed: {
    isShow() {
      return localStorage.getItem('isAdmin')
    },
    newPage: {
      get() {
        return this.value
      },
      set(newValue) {
        const value = parseInt(newValue, 10)
        this.editedPage = value
      }
    }
  },
  updated() {
    const totalPage = localStorage.getItem('currentPage')
    const checkpoint = JSON.parse(localStorage.getItem('checkpoint')) || {}
    const page = checkpoint[this.$route.params.id]
      ? checkpoint[this.$route.params.id]
      : 1
    const tempPage = page != null ? page.page : 1
    this.showPage = tempPage > totalPage ? tempPage : totalPage
    if (this.$route.fullPath.includes('sequence-labeling')) {
      this.error1 = false
      this.show = false
    }
  },
  // watch: {
  //   $route: {
  //     handler(newValue) {
  //       const currentPage = localStorage.getItem('currentPage')
  //       console.log(newValue)
  //       if (newValue.query.page > currentPage) {
  //         this.permission1 = true
  //         setTimeout(() => {
  //           this.permission1 = false
  //         }, 10000)
  //       }
  //     },
  //     immediate: true
  //   }
  // if (this.$route.query.page > currentPage) {
  //   this.permission1 = true
  //   setTimeout(() => {
  //     this.permission1 = false
  //   }, 2000)
  // }
  // console.log(this.$route.query.page)
  // },
  methods: {
    debounce(fun, wait) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        fun.apply(this)
      }, wait)
    },
    changePageNumber() {
      // 2021.8.31 配置防止跳转导致 导出分配问题
      // console.log(this.editedPage)
      // const currentPageAdmin = JSON.parse(localStorage.getItem('checkpoint'))
      const currentPageWorker = localStorage.getItem('currentPage')
      // console.log(currentPage)
      // console.log(currentPage[this.$route.params.id].page)
      if (this.editedPage > currentPageWorker || this.editedPage <= 0 || !this.editedPage) {
        this.permission = true
        setTimeout(() => {
          this.permission = false
        }, 2000)
      } else {
        this.$emit('input', this.editedPage)
      }
      // 2021.8.31 注释
      // } else if (
      //   !this.editedPage ||
      //   this.editedPage < 0 ||
      //   this.editedPage > this.length
      // ) {
      //   return
      // }
      // this.$emit('input', this.editedPage)
    },
    prevPage() {
      console.log('*******************************')
      if (this.$route.fullPath.includes('sequence-labeling')) {
        this.error1 = false
        this.show = false
      }
      if (localStorage.getItem('simpleKey') !== null) {
        const page = Math.max(this.value - 1, 1)
        this.$emit('input', page)
        localStorage.removeItem('simpleKey')
      } else {
        this.error1 = true
        setTimeout(() => {
          this.error1 = false
        }, 1000)
      }
      if (this.$route.fullPath.includes('text-classification') === false) {
        if (localStorage.getItem('alreadyTopLevel') !== null) {
          const page = Math.max(this.value - 1, 1)
          this.$emit('input', page)
          localStorage.removeItem('alreadyTopLevel')
          // 清空sessionStorage
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('CHANGETOPLEVEL') !== null) {
          const page = Math.max(this.value - 1, 1)
          this.$emit('input', page)
          localStorage.removeItem('CHANGETOPLEVEL')
          // 清空sessionStorage
          sessionStorage.removeItem('radioStatus')
          // 2021.8.15 判断从上到下翻页
        } else if (localStorage.getItem('topLevela') !== null) {
          const page = Math.max(this.value - 1, 1)
          this.$emit('input', page)
          localStorage.removeItem('topLevela')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('topLevel') !== null) {
          const page = Math.max(this.value - 1, 1)
          this.$emit('input', page)
          localStorage.removeItem('topLevel')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('TopLevel') !== null) {
          const page = Math.max(this.value - 1, 1)
          this.$emit('input', page)
          localStorage.removeItem('TopLevel')
          sessionStorage.removeItem('radioStatus')
        } else {
          this.error = true
          setTimeout(() => {
            this.error = false
          }, 2000)
        }
      } else {
      }
    },
    nextPage() {
      if (localStorage.getItem('simpleKey') !== null) {
        const page = Math.max(this.value + 1, 1)
        // sessionStorage.setItem('sessionCurrentPage', page)
        this.$emit('input', page)
        localStorage.removeItem('simpleKey')
      } else {
        this.error1 = true
        setTimeout(() => {
          this.error1 = false
        }, 1000)
      }
      if (this.$route.fullPath.includes('text-classification') === false) {
        // if (localStorage.getItem('topLevel') !== null) {
        //   const page = Math.max(this.value - 1, 1)
        //   this.$emit('input', page)
        //   localStorage.removeItem('topLevel')
        // }
        if (localStorage.getItem('alreadyTopLevel') !== null) {
          const page = Math.min(this.value + 1, this.length)
          this.$emit('input', page)
          localStorage.removeItem('alreadyTopLevel')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('CHANGETOPLEVEL') !== null) {
          const page = Math.max(this.value + 1, 1)
          this.$emit('input', page)
          localStorage.removeItem('CHANGETOPLEVEL')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('topLevel') !== null) {
          const page = Math.max(this.value + 1, 1)
          this.$emit('input', page)
          localStorage.removeItem('topLevel')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('topLevela') !== null) {
          const page = Math.max(this.value + 1, 1)
          this.$emit('input', page)
          localStorage.removeItem('topLevela')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('TopLevel') !== null) {
          const page = Math.max(this.value + 1, 1)
          this.$emit('input', page)
          localStorage.removeItem('TopLevel')
          sessionStorage.removeItem('radioStatus')
        } else {
          this.error = true
          setTimeout(() => {
            this.error = false
          }, 2000)
        }
      }
      // 2021.8.31 添加未标注页面标注后默认跳转第一页
      // const checkpoint = JSON.parse(localStorage.getItem('checkpoint')) || {}
      // const page = checkpoint[this.$route.params.id]
      //   ? checkpoint[this.$route.params.id]
      //   : 1
      // const status = page.isChecked
      // const typeProject = this.$route.fullPath.includes('text-classification')
      // if (status === 'true' && !typeProject === true) {
      //   this.editedPage = 1
      //   this.changePageNumber()
      // }
    },
    firstPage() {
      if (localStorage.getItem('simpleKey') !== null) {
        this.$emit('input', 1)
        localStorage.removeItem('simpleKey')
      } else {
        this.error1 = true
        setTimeout(() => {
          this.error1 = false
        }, 1000)
      }
      if (this.$route.fullPath.includes('text-classification') === false) {
        // if (localStorage.getItem('topLevel') !== null) {
        //   const page = Math.max(this.value - 1, 1)
        //   this.$emit('input', page)
        //   localStorage.removeItem('topLevel')
        // }
        if (localStorage.getItem('alreadyTopLevel') !== null) {
          this.$emit('input', 1)
          localStorage.removeItem('alreadyTopLevel')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('CHANGETOPLEVEL') !== null) {
          this.$emit('input', 1)
          localStorage.removeItem('CHANGETOPLEVEL')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('topLevel') !== null) {
          this.$emit('input', 1)
          localStorage.removeItem('topLevel')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('topLevela') !== null) {
          this.$emit('input', 1)
          localStorage.removeItem('topLevela')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('TopLevel') !== null) {
          this.$emit('input', 1)
          localStorage.removeItem('TopLevel')
          sessionStorage.removeItem('radioStatus')
        } else {
          this.error = true
          setTimeout(() => {
            this.error = false
          }, 2000)
        }
      } else {
        // this.$emit('input', 1)
      }
    },
    lastPage() {
      if (localStorage.getItem('simpleKey') !== null) {
        this.$emit('input', this.length)
        localStorage.removeItem('simpleKey')
      } else {
        this.error1 = true
        setTimeout(() => {
          this.error1 = false
        }, 1000)
      }
      if (this.$route.fullPath.includes('text-classification') === false) {
        // if (localStorage.getItem('topLevel') !== null) {
        //   const page = Math.max(this.value - 1, 1)
        //   this.$emit('input', page)
        //   localStorage.removeItem('topLevel')
        // }
        if (localStorage.getItem('alreadyTopLevel') !== null) {
          this.$emit('input', this.length)

          localStorage.removeItem('alreadyTopLevel')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('CHANGETOPLEVEL') !== null) {
          this.$emit('input', this.length)
          localStorage.removeItem('CHANGETOPLEVEL')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('topLevela') !== null) {
          this.$emit('input', this.length)
          localStorage.removeItem('topLevela')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('topLevel') !== null) {
          this.$emit('input', this.length)
          localStorage.removeItem('topLevel')
          sessionStorage.removeItem('radioStatus')
        } else if (localStorage.getItem('TopLevel') !== null) {
          this.$emit('input', this.length)
          localStorage.removeItem('TopLevel')
          sessionStorage.removeItem('radioStatus')
        } else {
          this.error = true
          setTimeout(() => {
            this.error = false
          }, 2000)
        }
      } else {
        // this.$emit('input', this.length)
      }
    }
  }
}
</script>
<style scoped>
.saveClass {
  position: absolute;
  top: 10px;
  left: 37%;
  width: 30%;
  z-index: 99;
}
.saveClass1 {
  position: absolute;
  top: 350px;
  left: 50px;
  width: 70%;
}
</style>
